let vm = new Vue({
    el: '.main-content',
    data: function () {
        return {
            //树设置对象
            setting: {
                //树的data设置
                data: {
                    key: {
                        title: 'title'
                    },
                    simpleData: {
                        //设置节点数组使用一维数组格式
                        enable: true,
                        //设置父ID属性名
                        pIdKey: 'parentId'
                    }
                },
                //事件回调函数设置
                callback: {
                    onClick: this.onClick
                },
                //显示处理回调设置
                view: {
                    fontCss: this.fontCss
                }
            },
            nodes: [],
            //显示office的名字
            name: '全部',
            //显示向上向下的标记
            up: false,
            //提交后台用的参数对象
            params: {
                officeId: '',
                name: '',
                type: ''
            },
            //接收后台页对象
            pageInfo: {
                current: 1,
                size: 5
            }
        }
    },
    methods: {
        select: function (current, size) {
            //分页查询返回信息放入pageInfo
            axios({
                url: `/manager/examine/select/${current}/${size}`,
                params: this.params
            }).then(response => {
                this.pageInfo = response.data.data;
            })
        },
        selectAll: function () {
            //提交后台用的参数对象
            this.params = {
                officeId: '',
                name: '',
                type: ''
            };
            this.name = '全部';
            this.select(1, this.pageInfo.size);
        },
        //初始化菜单树
        initTree: function () {
            //树初始化 init(dom节点对象，设置对象，节点数组对象)
            axios({
                url: '/manager/office/selectAll'
            }).then(response => {
                this.nodes = response.data.data;
                //动态生成一个根节点
                this.nodes[this.nodes.length] = {
                    id: 0,
                    name: '全部机构',
                    open: true
                };
                //必须获得节点集合后初始化
                let zTree = $.fn.zTree.init($('#pullDownTreeone'), this.setting, this.nodes);
            }).catch(error => {
                layer.msg(error.message);
            })
        },
        onClick: function (event, treeId, treeNode) {
            //给当前Vue的name属性赋值，实际上this并不是Vue，也获取不到
            this.name = treeNode.name;
            // console.log($.fn.zTree.getZTreeObj(treeId));//获取树对象
            if (treeNode.id !== 0) {
                //officeId赋值条件
                this.params.officeId = treeNode.id;
            }
        },
        search: function () {
            //1.获取树对象
            //2.调用getNodesByParamFuzzy(属性名，属性值，父节点id)模糊匹配节点
            let zTreeObj = $.fn.zTree.getZTreeObj("pullDownTreeOne");
            let nodesbyParamFuzzy = zTreeObj.getNodesByParamFuzzy("name", this.name, null);
            //3.高亮显示处理
            //还原所有高亮属性为false
            //获取所有节点并转换为简单数据格式
            let treeNodes = zTreeObj.transformToArray(zTreeObj.getNodes());
            for (let i = 0; i < treeNodes.length; i++) {
                treeNodes[i].hightLight = false;
                zTreeObj.updateNode(treeNodes[i]);
            }
            //将查找到的节点高亮属性设置为true
            for (let i in nodesbyParamFuzzy) {
                //设置高亮属性
                nodesbyParamFuzzy[i].hightLight = true;
                //更新树对象上的节点信息，会自动触发显示回调
                zTreeObj.updateNode(nodesbyParamFuzzy[i]);
            }
        },
        fontCss: function (treeId, treeNode) {
            //根据高亮标记设置高亮红色
            return treeNode.hightLight ? {color: 'red'} : {color: 'black'};
        },
        //修改up标记状态
        changeUp: function () {
            this.up = !this.up;
        }
    },
    created: function () {
        this.select(1, this.pageInfo.size);
    },
    mounted: function () {
        this.initTree();
    }
});